<template>
    <view class="page">
        <view class="page-tips">
            <text>Tips：如需使用pc端发布，底部有提供pc端链接</text>
        </view>
        <view class="page-form-type">
            <span style="color: red;margin-top: 8px">*</span>
            <text>服务类型</text>
            <picker class="item-picker" mode="selector" :value="needsName" :range="needsType" @change="needsTypeChange">
                <!--                        <text>{{region[0]}},{{region[1]}},{{region[2]}}</text>-->
                <view class="picker-item">
                    <text>{{needsType[needsName]}}</text>
                    <img :src="File_Url+'right-grey.png'" />
                </view>
            </picker>
        </view>
        <view class="page-form-text">
            <view style="padding: 20rpx 0 0 30rpx;display: flex;align-items: center">
                <span style="color: red;margin-top: 8px">*</span>
                <text>服务名称</text>
            </view>
            <view class="page-form-title" style="padding-top: 15rpx">
                <input type="text" placeholder="参考输入：客服专员/审核专员" v-model="title"/>
            </view>
            <view class="page-form-content">
                <view style="padding-bottom: 10rpx;display: flex;align-items: center">
                    <span style="color: red;margin-top: 8px">*</span>
                    <text style="font-weight: bold">服务描述</text>
                </view>
                <textarea style="height: 260rpx !important;" maxlength="-1" placeholder="请描述您的需求。参考输入：需要外包数据标签员，需求30人（如有需要可留下您的电子邮件，方便查收方案文件）" v-model="content"></textarea>
            </view>
        </view>
        <view class="page-form-item">
            <div style="display: flex;flex-direction: column">
                <text>开放渠道数</text>
                <text style="color: #666666;font-size: 24rpx;margin-top: 5px">愿意对接的供应商渠道数</text>
            </div>
            <div class="butting-num">
                <img @click="changeMaxButtingNum(1)" :src="File_Url+'tip-add.png'" />
                <input type="number" v-model="maxButtingNum"/>
                <div @click="changeMaxButtingNum(0)" class="reduce-content">
                    <img mode="widthFix" src="../../../static/img/reduce.png" />
                </div>
            </div>
            <!--<input type="number" placeholder="开放渠道数" v-model="maxButtingNum"/>-->
        </view>
        <!--<view class="page-form-item">
            &lt;!&ndash;<text>服务预算</text>
            <input type="text" placeholder="服务预算" v-model="budget"/>&ndash;&gt;

        </view>-->
        <view class="page-form-text">
            <view class="page-form-content" style="height: 150rpx">
                <view style="padding-bottom: 10rpx;display: flex;align-items: center">
                    <text>服务预算</text>
                </view>
                <textarea placeholder="参考输入为2000/人 或 30000/包 或 面谈" v-model="budget"></textarea>
            </view>
        </view>

        <!--<view class="page-form-item">
            <text>所在行业</text>
            <picker class="item-picker" mode="selector" :value="industryItem" :range="industry" @change="industryChange">
                <view class="picker-item">
                    <text>{{industry[industryItem].length>8?(industry[industryItem] || '').slice(0,8)+'...':industry[industryItem]}}</text>
                    <img :src="File_Url+'right-grey.png'" />
                </view>

            </picker>
        </view>-->
        <!--<view class="page-form-range">
            <view class="range-title">
                <view class="content-left">
                    <text>标签</text>
                    <input type="text" placeholder="单个标签最多4个字" v-model="rangeWords"/>
                </view>
                <view class="content-right" @click="addRangeList">
                    <img :src="File_Url+'tip-add.png'" />
                </view>
            </view>
            <view class="range-content">
                <view class="item" v-for="(item ,index) in labels" :key="index">
                    <text>{{item}}</text>
                    <img :src="File_Url+'delete-grey.png'" @click="delRange(index)"/>
                </view>
            </view>
        </view>-->
        <view class="page-form-item" v-if="classify_id==1">
            <text>所需人数</text>
            <input type="number" placeholder="请输入招聘数量" v-model="recruitment" />
        </view>
        <view class="page-form-item">
            <text style="color: red;margin-top: 8px">*</text>
            <text style="width: 200rpx">所在地区</text>
            <picker class="item-picker" mode="region" :value="region" :custom-item="customItem" @change="regionChange">
                <view class="picker-item">
                    <text>{{region[2]=='全部'?(region[1]=='全部'?region[0]:region[1]):region[2]}}</text>
                    <img :src="File_Url+'right-grey.png'" />
                </view>
            </picker>
        </view>
        <view class="page-form-item" v-if="classify_id==1">
            <text>详细地址</text>
            <input type="text" placeholder="请输入详细工作地址" v-model="address"/>
        </view>
        <view class="page-form-item" v-if="classify_id==1">
            <text>截止时间</text>
            <picker class="item-picker" mode="date" :value="date" :start="startDate" :end="endDate" @change="dateChange">
                <!--                        <text>{{region[0]}},{{region[1]}},{{region[2]}}</text>-->
                <view class="picker-item">
                    <text>{{date?date:'请选择'}}</text>
                    <img :src="File_Url+'right-grey.png'" />
                </view>
            </picker>
        </view>
        <view class="page-form-item">
            <text>是否展示单位信息</text>
            <switch class="item-switch" :checked="switchType" @change="switch1Change" />
        </view>
        <view class="page-form-item">
            <text>委托协会负责对接事务</text>
            <switch class="item-switch" :checked="switchTypes" @change="switch2Change" />
        </view>
        <view class="page-form-img">
            <view class="page-img-head">图片</view>
            <view class="page-img-list">
                <view class="img-content" v-for="(item,index) in imgList" :key="index" v-if="imgList.length>0">
                    <img :src="item" mode="aspectFill" @click="previewImage(index)" />
                    <img class="del-btn" :src="File_Url+'del-Image.png'" @click="delImage(index)" />
                </view>
                <img class="img-addbtn" :src="File_Url+'img-upload.png'" @click="chooseImage" v-if="imgList.length<9"/>
            </view>
        </view>
        <view class="page-radio" v-if="userStatement!=null">
            <radio color="#3981FF" size="14" class="radio" @click="radioChange" :checked="radioChecked"></radio>
            <text @click="skipStatement">我已阅读并同意相关服务条款和隐私政策</text>
        </view>
        <view class="page-form-btn">
            <view class="popup-web" @click.stop="popupwebShow">
                <img :src="File_Url+'web-icon.png'" />
                <text>电脑发布</text>
            </view>
            <button v-if="radioChecked==1" @click="sendDemandByPhone">提交发布审核</button>
            <button v-if="radioChecked==0" class="grey" @click="checklistRadio">提交发布审核</button>
        </view>
        <view class="popup-mode" v-if="webShow" @click.stop="popupwebShow">
            <view class="web-page" @click.stop>
                <view class="title">登录电脑端</view>
                <view class="content">
                    <view>1、用户完善个人资料并绑定手机号</view>
                    <view>2、用浏览器打开<text style="color: #3782FF" @click.stop="copyUrl('http://wxadmin.gdhrma.org.cn/#/login')">http://wxadmin.gdhrma.org.cn/#/login</text>，通过验证手机号登录</view>
                </view>
                <view class="button" @click="popupwebShow">
                    <text>我知道了</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "addNeeds",
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                title: '',
                content: '',
                recruitment: 0,
                region: ['','',''],
                customItem: '全部',
                address: '',
                needsType:[],
                needsName:'',
                industry:[],
                industryList:[],
                industryItem:'',
                Type: '',
                date: '',
                imgList: [],
                imgId: [],
                needsClassify:[],
                classify_id:'',
                rangeWords:'',
                labels:[],
                radioChecked: 1,
                userStatement: '',
                switchType: true,
                is_show_publisher:1,
                switchTypes: false,
                is_association_docking: 0,
                webShow: false,
                maxButtingNum: 1,
                budget: ''
            }
        },
        computed: {
            startDate() {
                return this.getDate('start');
            },
            endDate() {
                return this.getDate('end');
            }
        },
        onLoad(query){
            // if (query.type) {
            //     this.Type = query.type;
            // }
            this.getIndustryList();
            this.getNeedsClassify()
            this.getStatement();
        },
        methods:{
            popupwebShow(){
                if (this.webShow){
                    this.webShow = false;
                } else {
                    this.webShow = true;
                }

            },
            //复制链接
            copyUrl(url){
                let _this = this;
                uni.showModal({
                    title: '提示',
                    content: '将复制'+url+'至剪切板，是否继续进行！',
                    success: function (res) {
                        if (res.confirm) {
                            uni.setClipboardData({
                                data: url,
                                success: function () {
                                    uni.showToast({
                                        icon: 'success',
                                        title: '复制成功！'
                                    })
                                }
                            })
                        } else if (res.cancel) {
                            uni.showToast({
                                icon:'none',
                                title: "取消复制！"
                            })
                        }
                    }
                })
            },
            switch1Change(e){
                if (e.detail.value) {
                    this.is_show_publisher = 1;
                }else {
                    this.is_show_publisher = 0;
                }
            },
            switch2Change(e){
                if (e.detail.value) {
                    this.is_association_docking = 1;
                }else {
                    this.is_association_docking = 0;
                }
            },
            //发布需求前获取服务条款
            async getStatement(){
                const res = await this.$api.getStatement();
                if (res.data.level == 'success'){
                    this.userStatement = res.data.data;
                }
            },
            //获取行业信息
            async getIndustryList(){
                const res = await this.$api.getIndustryList();
                if (res.data.level == 'success'){
                    this.industryList = res.data.data
                    for (let i = 0; i< res.data.data.length ; i++){
                        this.industry.push(res.data.data[i].name);
                    }
                }
            },
            //获取需求分类
            async getNeedsClassify(){
                let params = { type:'demand' };
                const res = await this.$api.getClassify(params);
                if (res.data.level == 'success'){
                    this.needsClassify = res.data.data
                    for (var i = 0;i<this.needsClassify.length ; i++){
                        this.needsType.push(this.needsClassify[i].name)
                        if (this.Type!=''){
                            if (this.needsClassify[i].name == this.Type){
                                this.classify_id = this.needsClassify[i].id
                            }
                        }
                    }
                }
            },
            //选择图片
            chooseImage(){
                let count = 9 - this.imgList.length;
                var _this = this;
                uni.chooseImage({
                    sizeType: ['original', 'compressed'],  //可选择原图或压缩后的图片
                    sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
                    count: count,
                    success: res => {
                        _this.imgList= _this.imgList.concat(res.tempFilePaths);
                        for (let i=0; i< _this.imgList.length; i++){
                            _this.upLoadImage(_this.imgList[i]);
                        }
                    }
                })
            },
            //删除图片
            delImage(id){
                this.imgList.splice(id,1);
                this.imgId.splice(id,1);
            },
            //预览图片
            previewImage(index){
                uni.previewImage({
                    current:index,
                    urls: this.imgList
                })
            },
            //上传图片
            async upLoadImage(url){
                var _this = this;
                uni.showLoading({
                    title: '上传中'
                })
                uni.uploadFile({
                    url: _this.$api.BASE_URL+'file/upload-img',
                    filePath: url,
                    name: 'photo',
                    header: {
                        'content-type': 'application/json' // 默认值
                    },
                    success: function (res) {
                        res.data = JSON.parse(res.data);
                        if (res.data.level == 'success') {
                            _this.imgId.push(res.data.data.id)
                        }else {
                            uni.showToast({
                                icon:'none',
                                title:res.data.message
                            })
                        }
                        uni.hideLoading();
                    }
                })
            },
            //手机端发布需求
            async sendDemandByPhone(){
                if(this.region[1] == "全部"){
                    uni.showToast({
                        title: "请选择二级区域",
                        icon:'none'
                    });
                } else{
                    let params = {
                        user_token: uni.getStorageSync('userToken'),
                        title: this.title,
                        content: this.content,
                        recruitment: this.recruitment,
                        salary: '',
                        education: '',
                        first_arrive_time: '',
                        last_arrive_time: '',
                        start_time: '',
                        end_time: this.date,
                        classify_id: this.classify_id,
                        province: this.region[0],
                        city: this.region[1],
                        area: this.region[2],
                        address: this.address,
                        industry_id: this.industryItem==''?'':this.industryList[this.industryItem].id,
                        img_ids: this.imgId,
                        label_arr: this.labels,
                        is_show_publisher: this.is_show_publisher,
                        is_association_docking: this.is_association_docking,
                        max_butting_num: this.maxButtingNum,
                        budget: this.budget
                    }
                    const res = await this.$api.sendDemandByPhone(params);
                    if (res.data.level == 'success'){
                        uni.showToast({
                            icon: 'success',
                            title: res.data.message,
                            duration: 1500
                        })
                        this.getTemplate();
                        // let _this = this;
                        // setTimeout(function () {
                        //     _this.getTemplate();
                        // },3000)
                    } else {
                        uni.showToast({
                            icon: 'none',
                            title: res.data.message,
                            duration: 3000
                        })
                    }
                }
            },
            //获取订阅消息模板id
            async getTemplate(){
                const res = await this.$api.getTemplate({type: 'content_auth_result'});
                if (res.data.level == 'success'){
                    wx.requestSubscribeMessage({
                        tmplIds: res.data.data,
                        success(res){
                            console.log('成功')
                            console.log(res);
                        },
                        fail(res){
                            console.log('失败')
                            console.log(res);
                        },
                        complete(res){
                            uni.switchTab({
                                url: '/pages/home/home'
                            })
                        }
                    })
                }
            },
            // //弹窗提示
            // showModel(item){
            //     uni.showModal({
            //         title: '提示',
            //         content: '尊敬的VIP用户，是否订阅会员到期提醒？',
            //         success: function (res) {
            //             if (res.confirm) {
            //                 wx.requestSubscribeMessage({
            //                     tmplIds: item,
            //                     success(res){
            //                         console.log(res)
            //                         let time = new Date();
            //                         let year = time.getFullYear();
            //                         let month = time.getMonth()+1;
            //                         let day = time.getDate();
            //                         time = year+'-'+month+'-'+day;
            //                         uni.setStorageSync('timeSubscribe',time)
            //                         uni.switchTab({
            //                             url: '/pages/needs/needs'
            //                         })
            //                     }
            //                 })
            //             }
            //         }
            //     })
            // },
            //添加标签
            addRangeList(){
                if (this.rangeWords.trim()==''){
                    uni.showToast({
                        icon: 'none',
                        title: '标签内容不能为空'
                    })
                    return ;
                }
                if (!this.labels.includes(this.rangeWords)) {
                    this.labels.push(this.rangeWords);
                }
                this.rangeWords = '';
            },
            //删除标签
            delRange(id){
                this.labels.splice(id,1);
            },
            checklistRadio(){
                uni.showToast({
                    icon: 'none',
                    title: '未勾选我已阅读并同意相关服务条款和隐私政策'
                })
            },
            industryChange(e){
                console.log(e)
                this.industryItem = e.detail.value;
            },
            regionChange(e){
                console.log(e)
                let first = e.detail.value[0];
                let city = e.detail.value[1];
                if(first === "全部"){
                    return;
                }
                if(city == "全部"){
                    uni.showToast({
                        title: "请选择二级区域",
                        icon:'none'
                    });
                }
                this.region = e.detail.value;
            },
            needsTypeChange(e){
                this.needsName = e.detail.value;
                this.classify_id = this.needsClassify[this.needsName].id
            },
            //跳转服务条款
            skipStatement(){
                uni.navigateTo({
                    url:'/pages/needs/addNeeds/userStatement/userStatement'
                })
            },
            dateChange(e){
                this.date = e.target.value
            },
            getDate(type) {
                const date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();

                if (type === 'start') {
                    year = year - 60;
                } else if (type === 'end') {
                    year = year + 2;
                }
                month = month > 9 ? month : '0' + month;;
                day = day > 9 ? day : '0' + day;
                return `${year}-${month}-${day}`;
            },
            radioChange(){
                if (this.radioChecked==0){
                    this.radioChecked = 1;
                } else {
                    this.radioChecked = 0;
                }
            },
            changeMaxButtingNum(type) {
                if(type === 1){
                    this.maxButtingNum ++;
                } else{
                    if(this.maxButtingNum >= 1){
                        this.maxButtingNum --;
                    }
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        background: #F8F8F8;
        @include flex(flex-start, flex-start);
        flex-direction: column;
        min-height: 100vh;
    }
    .page-tips{
        line-height: 80rpx;
        height: 80rpx;
        font-size: 24rpx;
        color: #666666;
        padding: 0 30rpx;
    }
    .page-form-text{
        background: #FFFFFF;
        width: 100vw;
        margin-bottom: 10rpx;
        .page-form-title{
            padding: 30rpx 30rpx;
            border-bottom: 1rpx solid #E5E5E5;
            input{
                width: 100%;
                height: 56rpx;
                line-height: 56rpx;
            }
        }
        text{
            height: 45rpx;
            line-height: 45rpx;
            font-size: 32rpx;
        }
        .page-form-content{
            padding: 20rpx 30rpx;
            // height: 222rpx;
			height: 310rpx;
            textarea{
                line-height: 42rpx;
                font-size: 30rpx;
                height: 100%;
                width: 100%;
            }
        }
    }
    .page-form-img{
        background: #FFFFFF;
        width: calc(100vw - 60rpx);
        padding: 20rpx 30rpx;
        margin-bottom: 10rpx;
        .page-img-head{
            height: 45rpx;
            line-height: 45rpx;
            font-size: 32rpx;
        }
        .page-img-list{
            @include flexWrap(flex-start,flex-start);
            flex-direction: row;
            padding: 20rpx 0;
            .img-content{
                width: calc((100vw - 120rpx)/3);
                height: calc((100vw - 120rpx)/3);
                margin: 10rpx;
                position: relative;
                .del-btn{
                    width: 30rpx;
                    height: 30rpx;
                    position: absolute;
                    right: -15rpx;
                    top: -15rpx;
                    background: #FFFFFF;
                    border-radius: 360rpx;
                }
            }
            .img-addbtn{
                width: calc((100vw - 120rpx)/3);
                height: calc((100vw - 120rpx)/3);
                margin: 10rpx;
            }
        }
    }
    .page-form-type{
        background: #FFFFFF;
        width: calc(100vw - 60rpx);
        padding: 38rpx 30rpx;
        @include flex(flex-start);
        flex-direction: row;
        border-bottom: 1rpx solid #E5E5E5;
        text{
            height: 45rpx;
            line-height: 45rpx;
            font-size: 32rpx;
        }
        img{
            width: 30rpx;
            height: 30rpx;
            margin-left: auto;
        }
        .item-picker{
            margin-left: auto;
            width: calc(100% - 200rpx);
            .picker-item{
                @include flex(flex-end);
                flex-direction: row;
                width: 100%;
                text{
                    font-size: 32rpx;
                    line-height: 45rpx;
                    height: 45rpx;
                    color: #999999;
                    text-align: right;
                    width: calc(100% - 30rpx);
                    padding-left: 150rpx;
                }
                img{
                    width: 30rpx;
                    height: 30rpx;
                }
            }
        }
    }
    .page-form-item{
        background: #FFFFFF;
        width: calc(100vw - 60rpx);
        padding: 38rpx 30rpx;
        @include flex(flex-start);
        flex-direction: row;
        border-bottom: 1rpx solid #E5E5E5;
        text{
            height: 45rpx;
            line-height: 45rpx;
            font-size: 32rpx;
        }
        input{
            width: 70%;
            margin-left: auto;
            height: 45rpx;
            line-height: 45rpx;
            font-size: 32rpx;
            text-align: right;
        }
        .butting-num{
            display: flex;
            align-items: center;
            margin-left: auto;
            flex-direction: row-reverse;
            img{
                width: 40rpx;
                height: 40rpx;
            }
            input{
                width: 50px;
                height: 45rpx;
                line-height: 45rpx;
                font-size: 32rpx;
                margin: 0;
                text-align: center;
            }
            .reduce-content{
                width: 40rpx;
                height: 40rpx;
                display: flex;
                align-items: center;
                img{
                    width: 28rpx;
                }
            }

        }
        .item-picker{
            margin-left: auto;
            @include flex(flex-end);
            flex-direction: row;
            width: calc(100% - 128rpx);
            .picker-item{
                @include flex(flex-end);
                flex-direction: row;
                width: 100%;
                text{
                    font-size: 32rpx;
                    line-height: 45rpx;
                    height: 45rpx;
                    color: #999999;
                    text-align: right;
                    /*width: calc(100% - 30rpx);*/
                    padding-left: 150rpx;
                }
                img{
                    width: 30rpx;
                    height: 30rpx;
                }
            }
        }
        .item-switch{
            margin-left: auto;
            transform:scale(0.7)
        }
    }
    .page-form-range{
        background: #FFFFFF;
        border-bottom: 1rpx solid #E5E5E5;
        padding: 30rpx;
        width: calc(100vw - 60rpx);
        .range-title{
            @include flex(flex-start);
            flex-direction: row;
            padding-bottom: 24rpx;
            .content-left{
                @include flex(flex-start);
                flex-direction: row;
                width: calc(100% - 60rpx);
                text{
                    height: 45rpx;
                    line-height: 45rpx;
                    font-size: 32rpx;
                    margin-right: 20rpx;
                }
                input{
                    margin-left: auto;
                    height: 45rpx;
                    line-height: 45rpx;
                    font-size: 32rpx;
                    text-align: right;
                }
            }
            .content-right{
                margin-left: auto;
                width: 40rpx;
                height: 40rpx;
            }
        }
        .range-content{
            @include flex(flex-start);
            flex-direction: row;
            .item{
                height: 40rpx;
                padding: 0;
                background: #F1F1F1;
                border-radius: 8rpx;
                margin-right: 10rpx;
                @include flex(flex-start);
                flex-direction: row;
                text{
                    height: 30rpx;
                    line-height: 30rpx;
                    color: #333333;
                    font-size: 28rpx;
                    padding: 0 10rpx 0 20rpx;
                }
                img{
                    width: 30rpx;
                    height: 30rpx;
                }
            }
        }
    }
    .page-radio{
        padding: 30rpx;
        @include flex(flex-start);
        flex-direction: row;
        .radio{
            transform: scale(0.7);
        }
        text{
            color: #666666;
            font-size: 24rpx;
            line-height: 33rpx;
            height: 33rpx;
        }
    }
    .page-form-btn{
        margin-top: auto;
        padding: 60rpx 30rpx;
        width: calc(100vw - 60rpx);
        button{
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            color: #FFFFFF;
            font-size: 34rpx;
            background: #3782FF;
            border-radius: 44rpx;
        }
        .grey{
            background: #999999;
        }
        .popup-web{
            @include flex();
            flex-direction: row;
            padding: 30rpx;
            img{
                width: 30rpx;
                height: 30rpx;
            }
            text{
                height: 40rpx;
                line-height: 40rpx;
                color: #3782FF;
                font-size: 28rpx;
            }
        }
    }
    .popup-mode{
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.8);
        position: fixed;
        z-index: 3000;
        left: 0;
        top: 0;
        @include flex();
        flex-direction: column;
        .web-page{
            background: #FFFFFF;
            width: 70vw;
            padding: 30rpx;
            border-radius: 16rpx;
            .title{
                font-size: 32rpx;
                line-height: 50rpx;
                height: 50rpx;
            }
            .content{
                padding: 15rpx 0;
                @include flex(flex-start);
                flex-direction: column;
                view{
                    font-size: 28rpx;
                    line-height: 40rpx;
                    word-wrap: break-word;
                    padding: 15rpx 0;
                    width: 100%;
                }
            }
            .button{
                @include flex();
                flex-direction: column;
                text{
                    color: #FFFFFF;
                    background: #007aff;
                    padding: 0 80rpx;
                    font-size: 28rpx;
                    line-height: 50rpx;
                    height: 50rpx;
                    border-radius: 8rpx;
                }
            }
        }
    }
</style>
